<template>
  <div class="app-container">
    <div>
      <div id="myChart" style="width: 100%;height:600px;margin-top: 10px; float: left"></div>
    </div>
  </div>
</template>

<script>
import { chart } from '@/api/sys/inOut'
export default {
  name: 'Dashboard',
  data() {
    return {
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
      chart().then(res => {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {
            text: '停车场缴费收入统计',
            subtext: '单位：元',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            data: res.data.names
          },
          yAxis: {},
          series: [{
            name: '缴费收入',
            type: 'bar',
            data: res.data.nums
          }],

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        });
      });

    }
  }
}
</script>

<style lang="scss" scoped>

</style>
